<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var playListURL = 'http://localhost:8080/PA-Learning/getJSONResult1';
var videoURL= 'http://www.youtube.com/watch?v=';

$.getJSON(playListURL, function(data) {
    var list_data="";
    $.each(data.lists, function(i, item) {
        var Titre = item.titre;
        var videoID = item.videoID;
        var url = videoURL + item.videoID;
        var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
       
        list_data += '<li><a href="'+ url +'"><img alt="'+ Titre+'" src="'+ thumb +'"/>'+ Titre+'</a></li>';
        
    });
    $(list_data).appendTo(".cont");
    
});
</script>
<title>Insert title here</title>
</head>
<body>
<ul class="cont">
</ul>
</body>
</html>